<template>
  <div class="carousel">
    <el-carousel height="340px">
      <el-carousel-item v-for="(item,index) in recommendCity" :key="index">
        <!-- <h3 class="small">{{ item.city }}</h3> -->
        <img class="img" :src="item.img" alt @click="toDetails(item.id)" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendCity: [
        {
          img:
            "http://157.122.54.189:9095/uploads/f3a4d74cb52f434eb2f43118c2df3312.jpeg",
          city: "广州",
          id: 1478,
        },
        {
          img:
            "http://157.122.54.189:9095/uploads/4cef9fc0a96c4f9f95408d692fb868d9.png",
          city: "温州",
          id: 1479,
        },
        {
          img:
            "http://157.122.54.189:9095/uploads/7ab3d1475a1f41ae8f9ea1785d9a4c7f.jpeg",
          city: "淮安",
          id: 1480,
        },
        {
          img:
            "http://157.122.54.189:9095/uploads/f3a658685f214c0eb627cc305aca22b1.png",
          city: "北京",
          id: 1481,
        },
      ],
    };
  },
  methods: {
    // 轮播图跳转到详情页
    toDetails(id) {
      // console.log(id);
      this.$router.push({
        path: "/post/details?id=" + id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-carousel__item img {
  width: 700px;
  height: 340px;
  object-fit: cover;
  opacity: 0.75;
  line-height: 340px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>